<template>
  <div class="user-wapper">
    <div class="user_header">
      <!--<van-icon name="set" class="user_set" @click="toSetting"/>-->
      <div class="user_avatar">
        <img :src="avatar" alt="头像" width="55" height="55" />
      </div>
      <div>{{ nickName }}</div>
    </div>
    <div class="user_module">
      <van-cell-group>
        <!--<van-cell icon="star-o" title="我的收藏" is-link/>-->
        <van-cell icon="chat-o" title="版本信息" is-link />
        <!--<van-cell icon="service-o" title="服务中心" is-link/>-->
      </van-cell-group>
    </div>
    <div class="user_logout">
      <van-button round type="info" style="width: 100%" @click="loginout()"
        >退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
import avatar_default from "@/assets/images/avatar_default.png";
// import bg_default from '@/assets/images/login_bg.png';

export default {
  name: "User",
  data() {
    return {
      nickName: "昵称",
      avatar: avatar_default
      // background_image: bg_default
    };
  },
  methods: {
    loginout() {
      this.$store.logininfo = "";
      this.$router.push({
        path: "/login"
      });
    }
  },
  created() {
    this.nickName = this.$store.logininfo.username;
  }
};
</script>

<style scoped lang="scss">
.user-wapper {
  position: relative;
  .user_header {
    background-repeat: no-repeat;
    height: 170px;
    text-align: center;
    color: #fff;
    padding-top: 30px;
    /*background-image: linear-gradient(to top, #4470E5 20%, #3563DF 80%);*/
    background: url("~@/assets/images/bg.png");
    background-size: 100% 100%;
  }

  .user_set {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
  }
  .user_avatar {
    margin-bottom: 10px;
    img {
      border: 0;
      border-radius: 50%;
    }
  }
  .user_module {
    position: relative;
    top: 20px;
  }
  .user_logout {
    position: relative;
    top: 120px;
    width: 90%;
    /*font-weight: bold;*/
    /*!*background: #fff;*!*/
    margin: 0 auto;
    /*line-height: 50px;*/
    /*height: 50px;*/
    /*color: #fff;*/
    /*background-image: linear-gradient(to top, #4470E5 20%, #3563DF 80%);*/
  }
}
</style>
